<template>
  <div class="filter-container">
    <van-search
      v-model="searchText"
      placeholder="Search todos"
      @search="onSearch"
      @clear="onClear"
      shape="round"
    />
    
    <van-dropdown-menu>
      <van-dropdown-item v-model="filterStatus" :options="statusOptions" @change="onFilterChange" />
      <van-dropdown-item v-model="filterPriority" :options="priorityOptions" @change="onFilterChange" />
      <van-dropdown-item v-model="sortOption" :options="sortOptions" @change="onFilterChange" />
    </van-dropdown-menu>
    
    <div class="selected-filters" v-if="hasActiveFilters">
      <van-tag 
        v-if="filterStatus !== 'all'" 
        closeable 
        type="primary" 
        @close="filterStatus = 'all'; onFilterChange()"
      >
        {{ getStatusLabel(filterStatus) }}
      </van-tag>
      
      <van-tag 
        v-if="filterPriority !== 'all'" 
        closeable 
        :type="getPriorityTagType(filterPriority)" 
        @close="filterPriority = 'all'; onFilterChange()"
      >
        {{ getPriorityLabel(filterPriority) }}
      </van-tag>
      
      <van-tag 
        v-if="searchText" 
        closeable 
        type="primary" 
        @close="searchText = ''; onClear()"
      >
        Search: {{ searchText }}
      </van-tag>
      
      <van-button 
        v-if="hasActiveFilters" 
        size="small" 
        type="default" 
        @click="resetFilters"
      >
        Clear All
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const emit = defineEmits(['filter-change']);

// Filter state
const searchText = ref('');
const filterStatus = ref('all');
const filterPriority = ref('all');
const sortOption = ref('priority_asc');

// Options for dropdowns
const statusOptions = [
  { text: 'All', value: 'all' },
  { text: 'Completed', value: 'completed' },
  { text: 'Pending', value: 'pending' }
];

const priorityOptions = [
  { text: 'All Priorities', value: 'all' },
  { text: 'High', value: '1' },
  { text: 'Medium', value: '2' },
  { text: 'Low', value: '3' }
];

const sortOptions = [
  { text: 'Priority (High to Low)', value: 'priority_asc' },
  { text: 'Priority (Low to High)', value: 'priority_desc' },
  { text: 'Due Date (Earliest)', value: 'due_date_asc' },
  { text: 'Due Date (Latest)', value: 'due_date_desc' },
  { text: 'Created (Newest)', value: 'created_desc' },
  { text: 'Created (Oldest)', value: 'created_asc' }
];

// Computed properties
const hasActiveFilters = computed(() => {
  return filterStatus.value !== 'all' || 
         filterPriority.value !== 'all' || 
         searchText.value.trim() !== '';
});

// Methods
const onSearch = () => {
  emitFilterChange();
};

const onClear = () => {
  searchText.value = '';
  emitFilterChange();
};

const onFilterChange = () => {
  emitFilterChange();
};

const resetFilters = () => {
  searchText.value = '';
  filterStatus.value = 'all';
  filterPriority.value = 'all';
  sortOption.value = 'priority_asc';
  emitFilterChange();
};

const emitFilterChange = () => {
  // Parse sort option
  const [sortBy, sortOrder] = sortOption.value.split('_');
  
  emit('filter-change', {
    search: searchText.value,
    status: filterStatus.value,
    priority: filterPriority.value !== 'all' ? parseInt(filterPriority.value) : null,
    sortBy,
    sortOrder
  });
};

// Helper methods
const getStatusLabel = (status) => {
  return statusOptions.find(option => option.value === status)?.text || '';
};

const getPriorityLabel = (priority) => {
  return priorityOptions.find(option => option.value === priority)?.text || '';
};

const getPriorityTagType = (priority) => {
  switch (priority) {
    case '1': return 'danger';
    case '2': return 'warning';
    case '3': return 'success';
    default: return 'primary';
  }
};
</script>

<style scoped>
.filter-container {
  margin-bottom: 16px;
}

.selected-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 0 16px;
}
</style>
